<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认识URL</title>
</head>
<body>
    <button class="btn">获取新闻数据输出</button>
    <p class="news"></p>
    <!-- 
    新闻地址:http://hmajax.itheima.net/api/news
    需求: 点击按钮 通过axios 获取新闻数据 并输出
    -->
    <!-- 1. 导包 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.querySelector('.btn').addEventListener('click',() => {
            // console.log('我点了按钮')
            //  通过 axios 获取新闻数据 并输出 或 渲染
            axios({
                url:'http://hmajax.itheima.net/api/news'
            }).then(res => {
                // console.log(res)
                console.log(res.data)
                document.querySelector('.news').innerHTML = res.data.data.map(e => e.title)
            })
            
        })
    </script>
</body>
</html>